<html>
    <head>
        <title>Test</title>
        <style>

          ol#events { 
            height:*; 
            overflow:auto; 
            vertical-align:bottom;
          }


        </style>
        <script type="text/tiscript">

          event click $(button#set) {
            var r = view.trayIcon {
              image: this.loadImage(self.url("i32.png")),
              text: "I am trayIcon\ncreated: " + (new Date()).toString()
            };
            if( r )
              this.state.disabled = true;
          } 

          event click $(button#remove) {
            var r = view.trayIcon(#remove);
            if( r )
              $(button#set).state.disabled = false;
          } 

          event click $(button#place) {
            var (x,y,w,h) = view.trayIcon(#place);
            $(span#place).$content(x:{x},y:{y},w:{w},h:{h});
          } 

          event click $(button#update) {
            view.trayIcon{ text: "updated: " + (new Date()).toString() };
          } 

          function self.ready() {
            const ol = $(ol#events);
            assert ol;

            function append(name,evt) {
              ol.$append(<li>{name} x:{evt.x} y:{evt.y} buttons:{evt.buttons}</li>);
              if(ol.length > 100)
                ol.first.remove();
            }
 
            view << event trayicon-click (evt) { 
              append("trayicon-click",evt); 

              if(evt.buttons==2)
              {
                var (sx,sy) = view.box(#position,#client,#screen);
                self.popup($(menu#tray), 2, evt.x - sx, evt.y - sy );
              }                
            } 
          }


          event click $(button#hide) {
            view.windowState = View.WINDOW_HIDDEN;
          } 

          event click $(menu#tray > li#reveal) {
            view.windowState = View.WINDOW_SHOWN;
          }   

          event click $(menu#tray > li#exit) {
            // exiting the application
            view.trayIcon(#remove);
            view.close();
          }   


        </script>
        <menu.popup #tray>
          <li#reveal>Show window</li>
          <li#exit>Exit</li>
        </menu>
    </head>
    <body>

       <p>Note: this also demonstrates popup menu on RIGHT CLICK on tray icon.</p>

       <div>
         <button#set>Set Icon</button><br>
         <button#remove>Remove icon</button><br>
         <button#update>Update text</button>
         <button#place>Get place:</button><span#place /><br>
         <button#hide>Hide window</button>
       </div>
       
       trayIcon Events:
       <ol#events>
       </ol>

    </body>
</html>